<script setup>
import { useGlobalStore } from '@/stores/globalStore'
import { getToken } from '@/utils/webStorage'
const props = defineProps({
  disable: {
    type: Boolean,
    default: false,
  },
  errorMsg: String,
  type: {
    type: String,
    default: 'default',
  },
  isIconButton: {
    type: Boolean,
    default: false,
  },
  icon: {
    type: Boolean,
    default: false,
  },
  tip: {
    type: String,
    default: '',
  },
  tipPosition: {
    type: String,
    default: 'top',
  },
  needLogin: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: 'default',
  },
})

const emit = defineEmits(['click'])

const buttonClass = computed(() => {
  const size = props.icon ? 'icon' : props.size

  const baseClass = 'rounded-full flex-cc gap-1'

  const sizeClass = {
    // 'w-[35px] h-[35px]': props.icon,
    'w-[35px] h-[35px] flex-cc': size === 'icon',
    'px-2 h-[25px]': size === 'small',
    'px-4 h-[35px] whitespace-nowrap': size === 'default',
    'w-full h-[40px]': size === 'full',
  }

  const typeClass = {
    'bg-[--fill-0] border border-[--border-button] text-[--text-b] hover:bg-[--fill-hover] ': props.type === 'default',
    'bg-[#2e5592] text-[--text-0] hover:bg-[#16437C] ': props.type === 'primary',
    // 'bg-[--fill-b] text-[--text-0] hover:bg-[--fill-b-hover] ': props.type === 'primary',
    'bg-[--fill-disable] text-[--text-0] cursor-default hover:bg-[--fill-disable]':
      props.type === 'primary' && props.disable,
    'bg-[--fill-2] text-[--text-1] hover:bg-[--fill-hover] ': props.type === 'secondary',
    'bg-[#c94543] text-[--text-0] hover:bg-[#94322e]': props.type === 'danger',
    ' text-[--text-1] hover:bg-[--fill-hover]': props.type === 'secondary-no-bg',
  }

  return {
    ...sizeClass,
    ...typeClass,
    [baseClass]: true,
  }
})

const tipPositionClass = computed(() => {
  return props.tipPosition === 'top' ? 'top-[-40px]' : 'bottom-[-26px]'
})

const handleClick = () => {
  if (props.disable) {
    return
  }
  
  if (props.needLogin && !getToken()) {
    useGlobalStore().showLogin()
    return
  }
  emit('click')
}
</script>

<template>
  <div class="relative group/button">
    <button @click="handleClick" :class="buttonClass">
      <!-- 自定义 -->
      <slot></slot>
    </button>

    <div
      v-if="tip"
      :class="tipPositionClass"
      class="text-xs text-[--text-0] absolute left-[50%] whitespace-nowrap translate-x-[-50%] group-hover/button:opacity-100 opacity-0 bg-[#00000090] p-2 rounded-[4px] z-50">
      {{ tip }}
    </div>

    <div class="text-xs text-[#ba0721] absolute left-[50%] whitespace-nowrap translate-x-[-50%]">
      {{ errorMsg }}
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
